<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8"/>
 <title>后台登录</title>
 <meta name="author" content="DeathGhost" />
 <link rel="stylesheet" type="text/css" th:href="@{back/css/loginstyle.css}" tppabs="css/style.css" />
 <style>
  body{height:100%;background:#16a085;overflow:hidden;}
  canvas{z-index:-1;position:absolute;}
 </style>
 <script th:src="@{back/js/jquery.min.js}"></script>
 <script th:src="@{back/js/verificationNumbers.js}" tppabs="js/verificationNumbers.js"></script>
 <script th:src="@{back/js/Particleground.js}" tppabs="js/Particleground.js"></script>
 <script th:inline="javascript">
     $(document).ready(function() {
         //粒子背景特效
         $('body').particleground({
             dotColor: '#5cbdaa',
             lineColor: '#5cbdaa'
         });
         //验证码
         createCode();

     });

     $(document).keyup(function(event){
         if(event.keyCode ==13){
             onSubmit();
         }
     });


     function onSubmit() {
         if(validate()){
             $('#loginForm').submit();
         }
     }
 </script>
</head>
<body>
<form  id="loginForm"  action="login" method="post">
<dl class="admin_login">
 <dt>
  <strong>站点后台管理系统</strong>
  <em>Management System</em>
 </dt>
 <dd class="user_icon">
  <input name="userName" th:value="${userName}"  type="text" required="required|account" placeholder="账号" class="login_txtbx"/>
 </dd>
 <dd class="pwd_icon">
  <input name="passWord" type="password" required="required|pass"  placeholder="密码" class="login_txtbx"/>
 </dd>
 <dd class="val_icon">
  <div class="checkcode">
   <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
   <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
  </div>
  <input type="button" value="验证码核验" class="ver_btn" onClick="validate();">
 </dd>
 <dd>
  <input type="button" value="立即登陆" class="submit_btn" onClick="onSubmit();"/>
 </dd>
 <dd>
  <p>© 2019-2030  版权所有 </p>
  <p>https://www.tiance.vip</p>
 </dd>
</dl>
 </form >
<p  th:text="${msg}" style="font-size:14px;color:red;text-align: center;margin-bottom: 20px;"></p>

</body>
</html>
